<template>
	<div>
		<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" v-model="visible" width="50%" @close="refreshEmit" >
			<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmit(dataFormRef)" label-width="120px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="数据源" prop="sourceCode">
							<DicSelect v-model="dataForm.sourceCode" placeholder="请选择" :customData="dataSourceOptions" style="width:100%"></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="数据集编码" prop="setCode">
							<el-input v-model="dataForm.setCode" placeholder="数据集编码" v-bind:disabled="!!dataForm.id"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="数据集名称" prop="setName">
							<el-input v-model="dataForm.setName" placeholder="数据集名称"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="数据集描述" prop="setDesc">
							<el-input v-model="dataForm.setDesc" placeholder="数据集描述" ></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="dataForm.setType === 'sql'">
					<el-col :span="24">
						<el-form-item label="查询SQL">
							<div class="codemirror">
								<Codemirror v-model="dataForm.dynSentence" mode="text/x-sql" placeholder="Code gose here..." style="height: 500px" :tabSize="2" :extensions="extensionsSql"/>
								<!-- <MirrorTextArea v-mode="dataForm.dynSentence" language="sql" style="height: 500px"/> -->
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row v-if="dataForm.setType === 'http'">
					<el-col :span="24">
					<el-row>
						<el-col :span="24">
							<el-form-item label="请求路径">
								<el-input placeholder="请输入请求路径" v-model="httpForm.apiUrl" class="input-with-select">
									<template #prepend>
										<el-select v-model="httpForm.method" placeholder="请选择">
											<el-option label="GET" value="GET"></el-option>
											<el-option label="POST" value="POST"></el-option>
											<el-option label="PUT" value="PUT"></el-option>
											<el-option label="DELETE" value="DELETE"></el-option>
										</el-select>
									</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="请求头">
								<el-input v-model.trim="httpForm.header"  placeholder="请输入请求头"/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="请求体">
								<el-input v-model.trim="httpForm.body" placeholder="请输入请求体"/>
							</el-form-item>
						</el-col>
					</el-row>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="24">
						<el-tabs v-model.trim="tabsActiveName" type="card" @tab-click="handleClickTabs">
							<el-tab-pane label="查询参数" name="first">
								<el-button v-if="tableData.length == 0" type="primary" link size="small" @click="addRow()">添加</el-button>
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column align="center" label="序号" type="index" min-width="80"/>
									<el-table-column label="参数名" align="center">
										<template #default="scope">
											<el-input
											v-model.trim="tableData[scope.$index].paramName"
											:disabled="tableData[scope.$index].paramName == 'pageSize' ||
												tableData[scope.$index].paramName == 'pageNumber'"
											/>
										</template>
									</el-table-column>
									<el-table-column label="描述" align="center">
										<template #default="scope">
											<el-input
											v-model.trim="tableData[scope.$index].paramDesc"
											/>
										</template>
									</el-table-column>
									<el-table-column label="数据类型" align="center">
										<template #default="scope">
											<el-input v-model.trim="tableData[scope.$index].paramType"/>
										</template>
										</el-table-column>
										<el-table-column label="示例值" align="center">
										<template #default="scope">
											<el-input v-model.trim="tableData[scope.$index].sampleItem"/>
										</template>
									</el-table-column>
									<el-table-column label="校验" width="220" align="center">
										<template #default="scope">
											<el-checkbox v-model="tableData[scope.$index].mandatory" @change="Mandatory(scope.$index)">必选</el-checkbox>
											<el-button type="primary" @click="permissionClick(scope.row, scope.$index)">高级规则</el-button>
										</template>
									</el-table-column>
									<el-table-column label="操作" width="200" align="center">
										<template #default="scope">
											<el-button type="primary" link @click.native.prevent="cutOutRow(scope.$index, tableData)">删除</el-button>
											<el-button type="primary" link @click="addRow()">追加</el-button>
										</template>
									</el-table-column>
								</el-table>
							</el-tab-pane>
							<el-tab-pane label="数据转换" name="second">
								<div>
									<div class="filterWrapper">
										<div class="filterTable">
											<div v-for="(item, index) in itemFilterList" :key="index" class="filterBox">
												<div class="box">
													<DicSelect v-model="item.transformType" placeholder="请选择" @change="changeForm" dicCode="REPORT_TRANSFORM_TYP"></DicSelect>
													<!-- <Dictionary v-model="item.transformType" :updata-dict="item.transformType" :dict-key="'TRANSFORM_TYPE'" @change="changeForm"/> -->
													<el-button type="primary" link class="reduceFilter" icon="ele-Close" @click="reduceFilter(item)"/>
													<el-button v-if="item.transformType == 'js' || item.transformType == 'dict' || item.transformType == 'javaBean'"
														type="primary" link class="editor" icon="ele-Edit" @click="filterScriptBtn(item)"/>
												</div>
												<el-button type="primary" link class="font-icon-right" icon="ele-Right" />
											</div>
											<el-dialog :title="dialogTitle" v-model="dialogSwitchVisible" :close-on-click-modal="false" width="60%" append-to-body>
												<div v-if="isItemFilterType.transformType == 'js' || isItemFilterType.transformType == 'javaBean'">
													<div class="codemirror">
														<!-- //自定义高级规则？ -->
														<!-- <MirrorTextArea v-if="jsScriptVisible" v-model.trim="transformScript" language="javascript" style="height: 500px"/> -->
														<Codemirror v-if="jsScriptVisible" v-model.trim="transformScript" mode="text/javascript" placeholder="Code gose here..." :style="{ height: '100%' }" :tabSize="2" :extensions="extensionsJS"/>
													</div>
												</div>
												<div v-else>
													<div v-for="(item, index) in tableData2" :key="index">
														<label>字典项名称：</label>
														<el-input v-model.trim="item.name" size="small" style="width: 25%"/>
														<el-button type="danger" plain icon="ele-Delete" @click="delAllDict(index, tableData2)"/>
														<el-table :data="item.children" border style="width: 80%">
															<el-table-column label="key" width="180">
																<template #default="scope">
																	<el-input v-model.trim="item.children[scope.$index].name"/>
																</template>
															</el-table-column>
															<el-table-column label="值">
																<template #default="scope">
																	<el-input v-model.trim="item.children[scope.$index].value"/>
																</template>
															</el-table-column>
															<el-table-column label="操作" width="150px" align="center">
																<template #default="scope">
																	<el-button type="success" circle plain icon="ele-Plus" @click="addDict(scope.$index, item.children)"/>
																	<el-button type="danger" circle plain icon="ele-Delete" @click=" delDict(scope.$index, item.children)"/>
																</template>
															</el-table-column>
														</el-table>
													</div>
													<el-button type="success" @click="addAllDict()">新增</el-button>
												</div>
												<template #footer>
													<span class="dialog-footer">
														<el-button @click="dialogSwitchVisible = false">取消</el-button>
														<el-button type="primary" @click="filterScriptConfirm">保存</el-button>
													</span>
												</template>
											</el-dialog>
											<!-- //添加数据转换 -->
											<div class="addFilter" @click="addFilter">
												<!-- <i class="ele-Plus"/><span>新增</span> -->
												<el-button icon="ele-Plus" type="primary" link>新增</el-button>
											</div>
										</div>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="测试预览" name="third">
								<div style="max-height: 400px; overflow: auto">
									<JsonEditorVue v-model="cols" class="editor" :show-btns="false" :mode="'code'" lang="zh" @json-change="onJsonChange" @json-save="onJsonSave"/>
								</div>
							</el-tab-pane>
						</el-tabs>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取消</el-button>
					<el-button type="primary" @click="dataFormSubmit(dataFormRef)">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="自定义高级规则" v-model="dialogPermissionVisible" :close-on-click-modal="false" width="60%">
			<div class="codemirror">
				<!-- //自定义高级规则？ -->
				<Codemirror v-model.trim="validationRules" mode="text/javascript" placeholder="Code gose here..." :style="{ height: '100%' }" :tabSize="2" :extensions="extensionsJS"/>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogPermissionVisible = false">关闭</el-button>
					<el-button type="primary" @click="testResultset">测试</el-button>
					<el-button type="primary" @click="dialogValidationRules">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted,  defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import type { FormInstance } from 'element-plus'
import { getCodeList } from '/@/utils/cacheDict'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { reportApi } from '/@/api/reportapi'
import JsonEditorVue from 'json-editor-vue3'
// import MirrorTextArea from '/@/components/mirrorTextArea/index.vue'
import { Codemirror } from "vue-codemirror";
// 引入主题 可以从 codemirror/theme/ 下引入多个
import { oneDark } from '@codemirror/theme-one-dark'
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
import {javascript} from '@codemirror/lang-javascript';
import { sql } from "@codemirror/lang-sql";
export default defineComponent ({
	components: { JsonEditorVue,  Codemirror},
	setup(props, ctx) {
		const stores = useUserInfo()
		const { userInfos } = storeToRefs(stores)
		const dataFormRef = ref<FormInstance>()
		const extensions = [javascript({jsx: true, typescript: true}), oneDark]
		const state = reactive({
			visible: false,
			dataSourceOptions: [],
			tabsActiveName: 'first',
			dataDictionaryList: {},
			testMassageCode: null,
			title: "自定义高级规则",
			isRowData: {},
			validationRules: "",
			dialogPermissionVisible: false,
			dialogSwitchVisible: false,
			jsScriptVisible: false,
			isItemFilterType: {}, // 选中的转换类型id
			itemFilterScriptId: "",
			transformScript: `function dataTransform(data){\n\t//自定义脚本内容\n\treturn data;\n}`,
			dialogTitle: "脚本填写",
			tableData2: [],
			sqlEditKeyOptions: {
				selectOnLineNumbers: false
			},
			sqlEditKeyEditor: null,
			extensionsSql: [],
			extensionsJS: [],
			dataForm: {
				id: '',
				setCode: '',
				setName: '',
				setDesc: '',
				setType: '',
				sourceCode: '',
				dynSentence: '',
				caseResult: '',
				enableFlag: '',
				deleteFlag: '',
				creater: '',
				createTime: '',
				modUser: '',
				modTime: '',
				version: 0,
				dataSetParamList: [],
				dataSetTransformList: []
			},
			httpForm: {
				//http数据源相关数据
				apiUrl: '',
				method: 'GET',
				header: '{"Content-Type":"application/json;charset=UTF-8"}',
				body: ''
			},
			tableData:[
				{
					paramName: '',
					paramDesc: '',
					paramType: '',
					sampleItem: '',
					mandatory: true,
					requiredFlag: 1,
					validationRules: `function verification(data){\n\t//自定义脚本内容\n\t//可返回true/false单纯校验键入的data正确性\n\t//可返回文本，实时替换,比如当前时间等\n\t//return "2099-01-01 00:00:00";\n\treturn true;\n}`
				}
			],
			dataRule: {
				sourceCode: [{ required: true, message: "请选择数据源", trigger: "blur" }],
				setCode:[{ required: true, message: "数据集编码不能为空", trigger: "blur" }],
				setName: [{ required: true, message: "数据集名称不能为空", trigger: "blur" }],
			},
			// 内部真实的内容
			code: '',
			// 默认配置
			optionsSql: {
				mode: "text/x-sql",
				tabSize: 2, // 缩进格式
				// theme: 'cobalt', // monokai主题，对应主题库 JS 需要提前引入
				lineNumbers: true, // 显示行号
				line: true,
				styleActiveLine: true, // 高亮选中行
				hintOptions: {
					completeSingle: true // 当匹配只有一项的时候是否自动补全
				}
			},
			optionsJavascript: {
				mode: "text/javascript",
				tabSize: 2, // 缩进格式
				// theme: 'cobalt', // monokai主题，对应主题库 JS 需要提前引入
				lineNumbers: true, // 显示行号
				line: true,
				styleActiveLine: true, // 高亮选中行
				hintOptions: {
					completeSingle: true // 当匹配只有一项的时候是否自动补全
				}
			},
			cols: [],
			itemFilterList: [{
				transformType: "js",
				transformScript: ``
			}],
		})
		// 页面加载时
		onMounted(() => {
			// 数据字典
			getCodeList(state, ['REPORT_SOURCE_TYPE', 'REPORT_ENABLE_FLAG', 'REPORT_DATASET_TYPE', 'REPORT_TRANSFORM_TYP'])
			getDataSourceOptions()
		})
		// 打开弹窗
		const openDialog = (setType: string, id:string | undefined) => {
			state.dataForm = {
				id: '',
				setCode: '',
				setName: '',
				setDesc: '',
				setType: '',
				sourceCode: '',
				dynSentence: '',
				caseResult: '',
				enableFlag: '',
				deleteFlag: '',
				creater: '',
				createTime: '',
				modUser: '',
				modTime: '',
				version: 0,
				dataSetParamList: [],
				dataSetTransformList: []
			}
			if(!id){
				state.dataForm.setType = setType
			}else{
				state.dataForm.id = id
				//加载原数据
				reportApi().getDataSetById(id).then(data => {
					if (data && data.code === 0) {
						state.dataForm = data.data
						state.tableData = data.data.dataSetParamList
						state.itemFilterList = data.data.dataSetTransformList
						if(setType === 'http')
							state.httpForm = JSON.parse(data.data.dynSentence)
					}
				})
			}
			state.visible = true
		}
		const refreshEmit = () => {
			closeDialog()
			ctx.emit('refreshDataList')
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.visible = false;
		}
		//获取数据源定义
		const getDataSourceOptions = () => {
			reportApi().getDataSourceOptionsAll().then(data => {
				if(data && data.code === 0){
					state.dataSourceOptions = data.list
				}
			})
		}
		const dataFormSubmit = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			formEl.validate((valid: boolean) => {
				if (valid) {
					const loading = ElLoading.service({
						lock: true,
						text: '处理中',
						background: 'rgba(0, 0, 0, 0.7)',
					})
					state.dataForm.dataSetParamList =state.tableData
					state.dataForm.dataSetTransformList = state.itemFilterList
					state.dataForm.caseResult = JSON.stringify(state.cols);
					if (!state.dataForm.id) {
						//新增
						reportApi().saveDataSet(state.dataForm).then(data => {
							if (data && data.code === 0) {
								ElMessage.success('保存成功')
								ctx.emit('refreshDataList')
								state.visible = false
							}else{
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							ElMessage.error('保存失败')
						}).finally(() => {
							loading.close()
						})
					}else{
						//修改
						reportApi().updateDataSet(state.dataForm).then(data => {
							if (data && data.code === 0) {
								ElMessage.success('保存成功')
								ctx.emit('refreshDataList')
								state.visible = false
							}else{
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							ElMessage.error('保存失败')
						}).finally(() => {
							loading.close()
						})
					}
				}
			})
		}
		const onJsonChange = (value: any) => {}
		const onJsonSave = (value: any) => {}
		const handleClickTabs = (tab: { paneName: string; }, event: any) =>{
			if (state.dataForm.setType == "http") {
				//针对http数据源
				state.dataForm.dynSentence = JSON.stringify(state.httpForm);
			}
			if (tab.paneName == "third") {
				const params = {
					sourceCode: state.dataForm.sourceCode,
					dynSentence: state.dataForm.dynSentence,
					dataSetParamList: state.tableData,
					dataSetTransformList: state.itemFilterList,
					setType: state.dataForm.setType
				};
				reportApi().testTransformSet(params).then((data) => {
					if (data && data.code === 0) {
						state.cols = data.data
						state.testMassageCode = data.code
					} else {
						// 
					}
				})
			}
		}
		// 追加
		const addRow = () => {
			state.tableData.push({
				paramName: '',
				paramDesc: '',
				paramType: '',
				sampleItem: '',
				mandatory: true,
				requiredFlag: 1,
				validationRules: `function verification(data){\n\t//自定义脚本内容\n\t//可返回true/false单纯校验键入的data正确性\n\t//可返回文本，实时替换,比如当前时间等\n\t//return "2099-01-01 00:00:00";\n\treturn true;\n}`
			})
		}
		// 删除
		const cutOutRow = (index: number, rows: any[]) => {
			rows.splice(index, 1)
		}
		// 必选
		const Mandatory = (val: any) => {
			if (!state.tableData[val].mandatory) {
				state.tableData[val].requiredFlag = 0;
			} else {
				state.tableData[val].requiredFlag = 1;
			}
		}
		// --查询参数-----------------///////////////////////////////////////////////////////////////////////
		const permissionClick = (row: any, index: number) => {
			state.title = "自定义高级规则";
			if (state.isRowData.sampleItem != "") {
				state.isRowData = row;
				const fnCont = `function verification(data){\n\t//自定义脚本内容\n\t//可返回true/false单纯校验键入的data正确性\n\t//可返回文本，实时替换,比如当前时间等\n\t//return "2099-01-01 00:00:00";\n\treturn true;\n}`;
				state.validationRules = row.validationRules
				? row.validationRules
				: fnCont;
			}
			state.dialogPermissionVisible = true;
		}
		const changeForm = (val: any) => {
			if (!val) {
				state.dialogSwitchVisible = false;
				state.jsScriptVisible = false
			}
		}
		const addFilter = () => {
			let obj = {};
			state.tableData2 = [];
			if (state.itemFilterList.length == 0) {
				obj = {
				transformType: "",
				transformScript: "",
				itemFilterSort: 1
				};
			} else {
				obj = {
				transformType: "",
				transformScript: "",
				itemFilterSort: state.itemFilterList.length + 1
				};
			}
			state.itemFilterList.push(obj);
		}
		// 删除filter
		const reduceFilter = (item: any) => {
			if (state.itemFilterList.length > 0) {
				let index = state.itemFilterList.indexOf(item);
				if (index > -1) {
					state.itemFilterList.splice(index, 1);
				}
			}
		}
		// js 脚本编辑
		const filterScriptBtn = (item: any) => {
			console.log(item);
			state.isItemFilterType = item;
			state.dialogSwitchVisible = true;
			state.jsScriptVisible = true
			if (item.transformType == "js") {
				state.itemFilterScriptId = item.itemFilterSort;
				const fnCont = `function dataTransform(data){\n\t//自定义脚本内容\n\treturn data;\n}`;
				state.transformScript = item.transformScript
				? item.transformScript
				: fnCont;
			} else if (item.transformType == "dict") {
				// 
			} else if (item.transformType == "javaBean") {
				state.itemFilterScriptId = item.itemFilterSort;
				const fnCont = `package com;
		import com.fasterxml.jackson.databind.JsonNode;
		import com.skivingcloud.report.datas.service.IGroovyHandler;

		import java.util.List;

		/**
		 * 建议在idea写好复制整个类到此处，位置/src/test/java/com/DemoGroovyHandler.java
		 */
		public class DemoGroovyHandler implements IGroovyHandler {

			@Override
			public List<JsonNode> transform(List<JsonNode> data) {

				return data;
			}
		}`;
				state.transformScript = item.transformScript
				? item.transformScript
				: fnCont;
			}
		}
		// 字典项 增删改
		const addAllDict = () => {
			state.tableData2.push({
				name: "",
				children: [{ name: "", value: "" }]
			});
		}
		const addDict = (index: number, item: any) => {
			item.push({ name: "", value: "" });
		}
		const delAllDict = (index: number, rows: any) => {
			rows.splice(index, 1);
		}
		const delDict = (index: number, rows: any) => {
			if (index == 0) {
				ElMessage.error("至少保留一条");
				return;
			}
			rows.splice(index, 1);
		}
		// js 脚本编辑确定
		const filterScriptConfirm = () => {
			const arr = toObject(state.tableData2);
			state.itemFilterList.forEach((el, index) => {
				if (el.transformType == "dict") {
					el.transformScript = JSON.stringify(arr);
				} else {
					el.transformScript = state.transformScript;
				}
			});
			state.dialogSwitchVisible = false;
		}
		const toObject = (val: any) => {
			const objfirst = {};
			const objSecond = {};
			val.forEach(el => {
				el.name ? (objfirst[el.name] = el.children) : "";
			});
			for (const key in objfirst) {
				const newObj = {};
				objfirst[key].map(ev => {
					Object.assign(newObj, { [ev.name]: ev.value });
				});
				objSecond[key] = newObj;
			}
			return objSecond;
		}
		const sqlEditKeyOnMounted = (editor: any) =>{
			state.sqlEditKeyEditor = editor; 
		}
		const sqlEditKeyOnCodeChange = (editor: any) => {
			state.dataForm.dynSentence = editor.getValue()
		}
		// 自定义高级规则测试
		const testResultset = () => {
			state.isRowData.validationRules = state.validationRules;
			reportApi().verificationSet(state.isRowData).then((data) => {
				if (data && data.code === 0) {
					ElMessage.success('返回结果：' + data.data)
				} else {
					ElMessage.error('当前示例值校验不通过：' + data.msg)
				}
			}).catch(() => {
				ElMessage.error('当前示例值校验不通过')
			})
		}
		const dialogValidationRules = () => {
			state.isRowData.validationRules = state.validationRules;
			state.dialogPermissionVisible = false;
		}
		return{
			userInfos,
			dataFormRef,
			openDialog,
			closeDialog,
			refreshEmit,
			dataFormSubmit,
			getDataSourceOptions,
			onJsonChange,
			onJsonSave,
			handleClickTabs,
			addRow,
			cutOutRow,
			Mandatory,
			permissionClick,
			changeForm,
			reduceFilter,
			filterScriptBtn,
			addAllDict,
			addDict,
			delAllDict,
			delDict,
			filterScriptConfirm,
			toObject,
			addFilter,
			sqlEditKeyOnMounted,
			sqlEditKeyOnCodeChange,
			extensions,
			testResultset,
			dialogValidationRules,
			...toRefs(state),
		}
	}
})
</script>
<style lang="scss" scoped>
.code-mirror-form {
  :deep(.el-form-item__content) {
    height: 200px;
    overflow: hidden;
  }
}

.my-editor {
  height: 400px;

  div.jsoneditor {
    height: 400px !important;
  }
}

.title {
  width: 100%;
  display: inline-block;
  text-align: left;
}

.addSwitch {
  ul {
    list-style: none;
    margin: 0px;

    li {
      width: 200px;
      height: 60px;
      padding: 10px;
      border: 1px solid #aaa;
      float: left;
      margin-right: 10px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;

      &.add,
      &:hover {
        border: 1px solid #3385ff;
        color: #3385ff;
      }
    }
  }
}

.filterWrapper {
  position: relative;
}

.filterTable {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px 15px 25px 15px;
}

.filterWrapper .addFilter {
  cursor: pointer;
  width: 150px;
  height: 50px;
  border-radius: 3px;
  border: 1px solid #67c23a;
  margin-top: 20px;
  background: #e4f7da;
  padding-left: 24px;
}

.filterWrapper .addFilter i {
  font-size: 20px;
  color: #67c23a;
  margin-top: 16px;
  margin-left: 16px;
}

.filterWrapper .addFilter span {
  color: #67c23a;
  margin-left: 5px;
  font-size: 18px;
}

.filterBox {
  width: 182px;
  position: relative;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}

.filterBox .box {
  width: 150px;
  height: 50px;
  text-align: center;
  position: relative;
  background: #e0e8ff;
  border-radius: 3px;
  border: 1px solid #b8caff;
  float: left;
  padding: 5px 20px;
}

.filterBox .box .reduceFilter {
  width: 10px;
  height: 10px;
  position: absolute;
  right: 4px;
  top: 4px;
  cursor: pointer;
}

.filterBox .box .editor {
  width: 12px;
  height: 13px;
  position: absolute;
  left: -5px;
  top: 5px;
  cursor: pointer;
}

.filterBox .rightIcon {
  width: 45px;
  height: 19px;
  position: absolute;
  right: 10px;
  top: 15px;
}

.filterTextarea :deep(.el-textarea__inner) {
  min-height: 300px !important;
}

.filterBox .code-selected {
  width: 70%;
  margin-top: 4px;
}

.filterBox :deep(.el-input--suffix) .el-input__inner {
  background: #f4f7ff;
  border-radius: 3px;
  border: 1px solid #b8caff;
  color: #89a3ee;
}

.font-icon-right {
  line-height: 35px;
  font-size: 30px;
}

.popover-box {
  width: 100%;
  height: 220px;
  overflow-y: auto;
  padding: 10px;
}
</style>
